<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>视频展示页面</title>
    <link rel="stylesheet" href="../static/css/nav.css" th:href="@{/css/nav.css}">
    <link rel="stylesheet" href="../static/css/videoDetail.css" th:href="@{/css/videoDetail.css}">
    <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
<div style="height: 9.5vh; display: flex; justify-content: center; align-items: center; position: relative;background-color: white;width: 100%" th:replace="nav::nav">

</div>
<div class="container">
    <div class="video-column">
        <video controls autoplay>
            <source th:src="${videos.filePath}" type="video/mp4">
            您的浏览器不支持视频播放。
        </video>
    </div>
    <div class="info-column">
        <div class="author-card">
            <h2 class="card-title">关于作者</h2>
            <div class="author-info">
                <img th:src="${user.avatar}" alt="作者头像" class="author-avatar">
                <div class="author-name-container">
                    <span class="author-name" th:text="${user.username}"></span>
                    <span class="author-badge">🏆</span>
                </div>
            </div>
            <div class="author-stats">
                <div class="stat-item">
                    <span class="stat-label">想法</span>
                    <span class="stat-value" th:text="${thoughtNum}"></span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">文章</span>
                    <span class="stat-value" th:text="${postsNum}"></span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">关注者</span>
                    <span class="stat-value" th:text="${user.subscription}"></span>
                </div>
            </div>
            <div class="author-actions">
                <button class="follow-button" th:value="${user.id}" >+ 关注</button>
                <!--                <button class="message-button">发私信</button>-->
            </div>
        </div>
        <div class="interaction-container">
            <div class="like-section" th:data-value="${videos.videoId}" >
                <div class="like-icon-container icon-container">
                    <i class="iconfont like-icon" style="color: rgb(140 145 149);">&#xe610;</i>
                </div>
                <div class="count-container">
                    <span class="count like-count" th:text="${videos.likeCount}"></span>
                </div>
            </div>
            <div class="comment-section1" th:data-value="${videos.videoId}" onclick="articleDetail(this.dataset.value)">
                <div class="icon-container">
                    <i class="iconfont comment-icon" style="color: rgb(140 145 149);">&#xe6ad;</i>
                </div>
                <div class="count-container">
                    <span class="count comment-count" th:text="${videos.commentCount}"></span>
                </div>
            </div>

<!--            <div class="share-section">-->
<!--                <div class="icon-container">-->
<!--                    <i class="iconfont share-icon">&#xe60e;</i>-->
<!--                </div>-->
<!--                <div class="text-container">-->
<!--                    <span class="text">分享</span>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="share-outer">-->
<!--                <div class="share-detail">-->
<!--                    <i class="iconfont">&#xe618;</i>-->
<!--                    <span>复制链接</span>-->
<!--                </div>-->
<!--            </div>-->
        </div>
<!--        <button id="backBtn" class="back-button">-->
<!--            <i class="iconfont">&#xe61b;</i>-->
<!--            <span>返回上一页</span>-->
<!--        </button>-->

</div>
    <div class="comment-section">
        <div class="header-outer">
            <div  class="comment-header-outer">
                <div class="comment-header">
                    <span class="total-comments" >全部评论  <span th:text="${videos.commentCount}"></span> </span>
                    <i class="iconfont close">&#xe616;</i>
                </div>
            </div>
        </div>
        <div class="comment-item-outer"></div>
        <div class="comment-input-outer">
            <div class="comment-input">
                <input type="text" placeholder="留下你的精彩评论吧"  class="comment-input-detail">
                <div class="input-icons" th:data-value="${videos.videoId}" onclick="publish(this.dataset.value)">
                    <i class="iconfont">&#xe642; </i>
                    <span class="emoji-icon" > 发布</span>

                </div>
            </div>
        </div>
    </div>
    <script th:inline="javascript">
        let posts = [[${videos}]];
        let user = [[${user}]];
        console.log(posts)
        console.log(user)
        let errorInfo = [[${errorInfo}]];
        if (errorInfo && errorInfo !== '') {
            showCustomAlert(errorInfo, 3000);
        }
        let isLiked = [[${isLiked}]];
        console.log(isLiked)
        let like_icon = document.getElementsByClassName('like-icon')[0]
        if(isLiked){

            like_icon.style.color = 'rgba(255,0,0,1)'
        }

        let isFollowing =[[${isFollowing}]] ;
        let follow_button = document.querySelector('.follow-button');
        if(isFollowing){
            follow_button.classList.add('following');
            follow_button.textContent = '取消关注';
        }

        let errorMessage = [[${errorMessage}]];

        if (errorMessage && errorMessage !== '') {
            showCustomAlert(errorMessage, 3000);
        }
    </script>
<script src="../static/js/videoDetail.js" th:src="@{/js/videoDetail.js}"></script>
<script src="../static/js/video.js" th:src="@{/js/video.js}"></script>
</body>

</html>